@import "style/them";
@import "style/iconfont";

page {
  background-color: #f7f9fb;

  .img {
    z-index: -1;
    height: 300rpx;
    width: 100vw;
    background-size: cover;
    background-position: center center;
    position: absolute;
  }

  .title-card {
    height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(4rpx);

    .title {
      font-family: "Microsoft YaHei UI Light";
      height: 100rpx;
      width: 650rpx;
      margin:50rpx;
      font-size: 38rpx;
      font-weight: bold;
      letter-spacing: 4rpx;
      color: white;
    }

    .inner-card {
      margin: 0 50rpx;
      display: flex;
      justify-content: space-between;
      color: white;

      .time {
        font-size: 26rpx;
      }

      .hits {
        font-size: 22rpx;
      }
    }
  }


  .content {
    padding: 20rpx;

    image {
      border-radius: 10rpx;
    }

    text {
      font-family: "Baskerville Old Face";
      letter-spacing: 2rpx;
      color: #000;
      font-size: 28rpx;
    }
  }

  .tab-blank {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    height: 80rpx;
  }

  .tab-container {
    box-sizing: border-box;
    z-index: 99;
    width: 100vw;
    //适配苹果手机
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(40rpx);
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;

    .collect {
      width: 350rpx;

      button {
        height: 100rpx;
        border: none;
        width: 350rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &::after {
          border: none;
          border-radius: 0;
        }
      }
    }

    .share {
      width: 350rpx;

      button {
        height: 100rpx;
        border: none;
        width: 350rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &::after {
          border: none;
          border-radius: 0;
        }
      }
    }

    .iconfont {
      font-size: 44rpx;
    }

    .text {
      margin-left: 10rpx;
      font-size: 26rpx;
    }
  }
}

